<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *,body{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body{
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            flex-direction: column;
            background-color: wheat;
        }
        a{
            text-decoration: none;
            color: azure;
            /* color: dimgray; */
        }
        .box{
            /* 简单说下这个属性 */
            /* 自定义图形,将父盒子视为坐标轴,左上角对应0,0点,右下角对应100%,100%。 %是相对父盒子的大小 */
            /* 会按顺序将点连起来,得到想要的图形 */
            clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);

            /* 圆,半径 圆心 */
            /* clip-path: circle(50% at 50% 50%); */

            /* 椭圆,主轴 侧轴 圆心,圆可以缩写.可以根据需要缩小 */
            /* clip-path: ellipse(25% 25% at 50% 50%); */

            /* 向内缩小,上 右 下 左 */
            /* clip-path: inset(0% 0% 0% 0%); */

            /* 注意下面的画法,这种画法可让中心空出来 */
            /* clip-path: polygon(0% 0%, 0% 100%, 25% 100%, 25% 25%, 75% 25%, 75% 75%, 25% 75%, 25% 100%, 100% 100%, 100% 0%); */

            /* 注意居中的内容不会因为形状而改变位置 */
        }
        .box{
            width: 300px;
            height: 300px;
            background-color: #888;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            /* bor也很怪,慎用 */
            /* border-radius: 50%; */
            /* 这个border好怪 */
            /* border: 10px solid pink; */
            /* box-shadow没用 */
        }
        .box a{
            font-size: 28px;
        }
    </style>
</head>
<body>
    <div class="box">
        <a href="javascritpt:;">按钮</a>
    </div>
</body>
</html>